<template>
  <div class="mounts">

  <div class="hand">
    <span class="sp1">网易云音乐</span>&nbsp;&nbsp;<span> 作者: ——李成江</span>
  </div>


   <Swiper :lists="list" v-if="list.length!==0"></Swiper>


    <el-card> 
       <div class="tite">
         <div class="tt"><span class="spn">专辑</span><h5>{{obj.name}}</h5></div>
         <div>{{re}}</div>
       </div>

       <div class="main">
       <router-link
      tag="div"
      :to="`/plays/${itm.id}`"
        class="itm" v-for="itm in list" :key="itm.id">
          <div class="imgs">
            <img v-lazy="itm.al.picUrl" alt="">
          </div>
          <div class="tit">{{itm.al.name}}</div>
       </router-link>
    </div>
    </el-card>

  </div>
</template>
<script>

import Swiper from '@/components/swiper.vue'
export default {
   name:'Mounts',
  data() {
    return{
      obj:{},
     list:[],
      re:[]
    } 
  },
  created(){
 this.getlist()

  },
  components:{
Swiper
  },
  methods:{
    getlist(){
     
      this.$http.get('/api/playlist/detail',{params:{id:this.$route.params.id||this.$store.mountid}}).then(res=>{
        // console.log(res.data.playlist.tracks);
       this.list= res.data.playlist.tracks
        this.obj=res.data.playlist
       var so=res.data.playlist.tags
       this.re=Array.from(so).join('|')

        this.$store.commit('getlist',res.data.playlist.tracks)
        
        this.$store.commit('moun',this.$route.params.id*1)
      
      })
    },
  
  },
 
}
</script>


<style lang="less" scoped>
.mounts{
.hand{

  height: 30px;
 color: rgb(63, 26, 231);
  margin-bottom: 3px;
}
.hand .sp1{
  font-weight: 900;
 font-size: 22px;
 color: #000;
}
.tite{
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .tt{
    color: blue;
  }
}

.main{
   
  display: flex;
  flex-wrap: wrap;
}

.itm{
  margin: 1px;
  width: 110px;
  height: 150px;
  .imgs img{
     width: 100px;
     height: 100px;
  }
  .tit{
    height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;/* 不换行 */

  }
}
.spn{
  color: #000;
  font-size: 18px;
  font-weight: 900;
}














}


</style>
